<template>
  <el-card class="role-card">
    <el-descriptions
      title="有员工信息添加失败,请查看错误日志"
      :column="2"
      border
    >
      <template #extra>
        <el-button type="primary" @click="download">下载错误日志</el-button>
      </template>
      <template v-for="(item, index) in tableData" :key="item">
        <el-descriptions-item>
          <template #label>
            <el-icon><Warning /></el-icon>
            {{ index + 1 }}
          </template>
          <el-text type="danger">{{ item }}</el-text>
        </el-descriptions-item>
      </template>
    </el-descriptions>
  </el-card>
</template>
<script>
export default {
  name: "getRoleList",
};
</script>
<script setup>
import { ref } from "vue";
import store from "@/store";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

const tableData = ref([]);
const total = ref(0);

const data = store.state.userManagement.errorList || [];
total.value = data.length;
tableData.value = data;

const download = () => {
  let downloadData = tableData.value;
  // 构造数据字符，换行需要用\r\n
  let CsvString = downloadData.map((data) => data + "\r");
  try {
    // 加上 CSV 文件头标识
    CsvString =
      "data:application/vnd.ms-excel;charset=utf-8,\uFEFF" +
      encodeURIComponent(CsvString);
    // 通过创建a标签下载
    const link = document.createElement("a");
    link.href = CsvString;
    // 获取当前时间
    const now = dayjs();
    // 格式化日期和时间
    const formatted = now.format("YYYY-MM-DD HH:mm:ss");

    // 输出结果
    console.log("当前时间:", formatted);
    // 对下载的文件命名
    link.download = `导入错误原因列表 ${formatted}.csv`;
    // 模拟点击下载
    link.click();
    // 移除a标签
    link.remove();
  } catch (e) {
    ElMessage.error("导入错误");
  }
};
</script>

<style lang="scss" scoped>
.role-card {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
  }
  .tip {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 20px;
    gap: 0.3125rem;
    .el-text {
      line-height: 10px;
    }
  }
  .header {
    margin-bottom: 22px;
    text-align: right;
  }

  :deep(.el-tag) {
    margin-right: 6px;
  }
}
.el-card {
  border-radius: 10px;
}
</style>
